<template>
	<view class="content ">
        <view class="header">
            <view class="justify-between headerSearch align-center">
               <view class="city align-center" @click="openArea">
                   {{areaName}} <uv-icon name="arrow-down-fill" size="8" color="rgba(68, 68, 68, 1)"></uv-icon>
               </view>
               <text class="mlr10 line"></text>
                <input type="text" v-model="keyword" class="flex1" placeholder="请输入关键词搜索" />
                <uv-icon color="#000" size="28" @click="search()" name="search"></uv-icon>
            </view>
        </view>
        <view class="plr15 ptb15">
               
              
                <view class="bgWhite radius6  artItem   mb15"  v-for="(i,n) in list" :key="n" @click="toDetails(i)">
                            <image :src="i.logo_image" mode=""></image>
                            <view class=" mlr10 mt15 justify-between align-center" >
                                
                                <view class="flex-col justify-between  flex1">
                              <view class="justify-start align-center ">
                                  <image src="/static/images/middle/i1.png" class="mr5" style="width: 35rpx;" mode="widthFix"></image>
                                  <text style="color: #000;" class="clamp ft16 bold ">{{i.name}}</text>
                              </view>      
                                    <text class="name">{{i.title}}</text>
                                    <view class="item-tag justify-start flex-wrap">
                                       <text v-for="(item,index) in i.label_arr" class="tagItem ml5">{{item}}</text>
                                    </view>
                                    <view class="right justify-between align-center mt10" >
                                        <image src="/static/images/middle/i2.png" style="width: 30rpx;" mode="widthFix"></image>
                                        <text class="flex1 clamp2 ml5 mr20" style="width: 100%;">{{i.address}}</text>
                                        <!-- <text style="color: #25CE87;">2.8km</text> -->
                                    </view>
                                </view>
                            </view>
                            <view class="" v-if="list.length==0">
                                <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
                            </view>
                   
                        
                </view>
        </view>
      		<uv-picker ref="picker" keyName="name" :columns="[areaList]" @confirm="confirm"></uv-picker>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                cateList:[],
				list: [],
                current:0,
                topCurrent:0,
                page:1,
                area_id:"",
                keyword:"",
                areaList:[],
                areaName:""
				
			}
		},
		
		onReady() {
			
		},
        onLoad() {
            this.getArea()
            
            // this.venueCate()
            
        },
        onReachBottom() {
          this.page++  
          this.getList()
        },
		methods: {
            getArea(){
                this.$api.getArea().then(res=>{
                    this.areaList =res.data
                    this.areaName= res.data[0].name
                    this.area_id= res.data[0].id
                    this.getList()
                })
            },
            search(){
              this.page=1
                this.list = []
                this.getList()
            },
            openArea(){
              this.$refs.picker.open()  
            },
            confirm(e){
				
				this.areaName= e.value[0].name
				this.area_id= e.value[0].id
				this.search()
              console.log(e)  
            },
            async actCate(){
              const {data,code}  =     await this.$api.CategoryList()
              console.log(code,data)
              if(code==200){
                  this.cateList = data
                  this.getactList()
              }
            },
            async getactList(){
                let id = this.cateList[this.current].id
              const {data,code}  =     await this.$api.activityList({categoryId:id})
              console.log(code,data)
              if(code==200){
                  this.list = data
              }
            },
            async venueCate(){
              const {data,code}  =     await this.$api.venueCateList()
              console.log(code,data)
              if(code==200){
                  this.cateList = data
                  
              }
            },
            async getList(){
                // let id = this.cateList[this.current].id
            let data  =     await this.$api.getShopList({area_id:this.area_id,page:this.page,keyword:this.keyword})
              console.log(data)
                  this.list = [...this.list,...data.list]
              
            },
            change(index){
                this.current = index
                if(this.topCurrent==0){
                    this.getList()
                }else{
                    this.getactList()
                }
                
            },
            call(){
                uni.makePhoneCall({
                    phoneNumber:''
                })
            },
            toMain(item){
                    uni.navigateTo({
                        url:'/pages/chooseSession/index?id='+item.id
                    })
            },
            toDetail(item){
                uni.navigateTo({
                    url:'/pages/addressMain/index?id='+item.id
                })
            },
            toDetails(item){
                uni.navigateTo({
                    url:'/pages/store/index?shop_id='+item.id
                })
            },
            changeTopCurrent(type){
                this.topCurrent = type
                this.current=0
                if(type==0){
                    this.getList()
                    // this.venueCate()
                }else{
                    this.actCate()
                }
            }
		}
	}
</script>
<style scoped lang="scss">
                
            .header{
                image{
                    width: 100%;
                    height: 300rpx;
                }
            }
                
            .cateItem{
                font-weight: 500;
                font-size: 24rpx;
                color: #3D3D3D;
                border: 2rpx solid #D3D3D3;
                padding: 16rpx  56rpx;
                border-radius: 86rpx;
                margin-right: 24rpx;
            }
                
            .active{
                border: 2rpx solid #2CC6A1;
                color: #2CC6A1;
            }
        .artItem {
            font-size: 24rpx;
            color: #999999;
            padding-bottom: 28rpx;
            box-sizing: border-box;
                 border-radius: 15rpx ;
            
            image{
                width: 100%;
                height: 290rpx;
                border-radius: 15rpx 15rpx 0 0 ;
                
            }
         
            .name{
                font-size: 32rpx;
                color: #3D3D3D;
                margin-bottom: 8rpx;
            }
        }
        .topTab{
            font-size: 32rpx;
            color: #666666;
            line-height: 54rpx;
            view{
                margin-right: 62rpx;
            }
        }
            
        .topActive{
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
        }
        .item-price {
        	font-size: 24rpx;
        	color: #FF9012;
        	text {
        		font-size: 36rpx;
                line-height: 36rpx;
        	}
        }
        
        .tagItem{
            margin: 22rpx 0 0 10rpx;
            min-width: 118rpx;
            height: 40rpx;
            background:rgba(0, 197, 132, .08) ;
            border-radius: 3rpx;
            font-size: 22rpx;
            color: #00C584;
            line-height: 40rpx;
            text-align: center;
            padding: 0 15rpx;
            box-sizing: border-box;
        }
</style>